<template>
  <div class="app">
    <div class="app-content" ref="container" />
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import { Graph } from '@antv/x6'

export default defineComponent({
  name: "orth",
  mounted(){
      const graph = new Graph({
        container: (this.$refs.container) as HTMLElement,
        width: 800,
        height: 600,
        grid: true,
      })

      const rect1 = graph.addNode({
        x: 30,
        y: 30,
        width: 100,
        height: 40,
        label: 'hello',
      })

      const rect2 = graph.addNode({
        x: 300,
        y: 300,
        width: 100,
        height: 40,
        label: 'world',
      })

      graph.addNode({
        shape: 'circle',
        x: 100 - 5,
        y: 200 - 5,
        width: 10,
        height: 10,
        attrs: { body: { fill: '#31d0c6', stroke: '#fe854f' } },
      })

      graph.addNode({
        shape: 'circle',
        x: 300 - 5,
        y: 120 - 5,
        width: 10,
        height: 10,
        attrs: { body: { fill: '#31d0c6', stroke: '#fe854f' } },
      })

      graph.addEdge({
        source: rect1,
        target: rect2,
        vertices: [
          { x: 100, y: 200 },
          { x: 300, y: 120 },
        ],
        router: {
          name: 'orth',
        },
      })
    }
})
</script>

<style scoped>

</style>
